<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const echartBar = ref(null);
let options = ref([]);

// 函数: 设置面积类型折线图
function chartBartInit() {
  const myChart = echarts.init(echartBar.value, "dark", {
    width: 480,
    height: 400,
  });

  // 转换 API 数据为 xAxis 和 seriesData
  const xAxisData = options.value.map(item => item.name);
  const seriesData = options.value.map(item => item.value);

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    title: {
      text: '图书发布趋势分析',
      left: 'center',
      top: 20,
      textStyle: {
        color: '#FFF',
        fontWeight: 'bold',
        fontSize: '20px'
      },
    },
    legend: {
      data: ['数量']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      boundaryGap: false,  // 设置 x 轴从0开始
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
    },
    series: [
      {
        name: '数量',
        type: 'line',
        symbol: 'none',  // 不显示数据点
        sampling: 'lttb',  // 采样方式为 'lttb'（Largest Triangle Three Buckets），适用于大数据量
        itemStyle: {
          color: 'rgb(255, 70, 131)', // 设置线条颜色
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgb(255, 158, 68)' },
            { offset: 1, color: 'rgb(255, 70, 131)' }
          ])  // 设置渐变色
        },
        data: seriesData
      }
    ]
  };

  myChart.setOption(option);
}

// 函数: 获取数据
function getData() {
  // 调用 API 接口
  axios.get('/book-api/queryAllAdsPublishTrendAnalysis')
      .then(response => {
        options.value = response.data.data;  // 假设接口返回的数据结构为 { data: [...] }
        chartBartInit();  // 调用初始化函数渲染图表
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
}

onMounted(() => {
  getData(); // 组件挂载时调用获取数据函数
});
</script>

<template>
  <div class="chart-wrapper">
    <div ref="echartBar" class="chart-container"></div>
  </div>
</template>

<style scoped>
.chart-wrapper {
  display: flex;
  justify-content: center;  /* 居中折线图 */
  align-items: center;      /* 居中折线图 */
  height: 100%;             /* 让父容器撑满可用高度 */
  width: 100%;              /* 让父容器撑满可用宽度 */
}

.chart-container {
  background-color: #100C2A;
  width: 88%;  /* 可以根据需要调整折线图的宽度 */
  height: 500px;
  box-sizing: border-box; /* 包括内边距和边框在内的元素总宽度和高度 */
  margin: 10px auto 0px;
}
</style>
